var bgDiv = document.getElementsByClassName("background-fix")[0];
//var height = window.screen.availHeight + 'px';
var firstPage = document.getElementsByClassName("content-firstPage")[0];
var weatherPage = document.getElementsByClassName("content-weatherPage")[0];
var thirdPage = document.getElementsByClassName("content-thirdPage")[0];
var photoPage = document.getElementsByClassName("content-photoPage")[0];
//var fifthPage = document.getElementsByClassName("content-fifthPage")[0];
/*
 //var width = window.screen.availWidth;
var weatherPage = document.getElementsByClassName("content-weatherPage")[0];
var thirdPage = document.getElementsByClassName("content-thirdPage")[0];
var photoPage = document.getElementsByClassName("content-photoPage")[0];
var fifthPage = document.getElementsByClassName("content-fifthPage")[0];
 var divHeight = parseInt(window.getComputedStyle(bgDiv).height);
*/
var imgPath = "../singlepage/src/";

var firHeight = parseInt(getStyle(firstPage,"height"));
var weaHeight = parseInt(getStyle(weatherPage,"height"));
var thiHeight = parseInt(getStyle(thirdPage,"height"));
var phoPage = parseInt(getStyle(photoPage,"height"));
//var fifPage = parseInt(getStyle(fifthPage,"height"));
window.onload = function(){
    //alert(height);
    bgDiv.style.height = firHeight + 'px';
    /*
    firstPage.style.height = height;
    weatherPage.style.height = height;
    thirdPage.style.height = height;
    photoPage.style.height = height;
    fifthPage.style.height = height;
    */
    bgDiv.style.background = 'url("' + imgPath + 'bg1.jpg")';
    bgDiv.style.backgroundRepeat = "no-repeat";
    bgDiv.style.backgroundSize = "cover";
    bgDiv.style.backgroundPosition = "center";
    //alert(fp);
};
    window.onscroll = function(){
    var top = document.documentElement.scrollTop || document.body.scrollTop;
    //console.log(top);
    if( top >= firHeight && top < firHeight + weaHeight + thiHeight){
        bgDiv.style.background = 'url("' + imgPath + 'bg2.jpg")';
        bgDiv.style.backgroundRepeat = "no-repeat";
        bgDiv.style.backgroundSize = "cover";
        bgDiv.style.backgroundPosition = "center";
    }
    else if( top < firHeight){
        bgDiv.style.background = 'url("' + imgPath + 'bg1.jpg")';
        bgDiv.style.backgroundRepeat = "no-repeat";
        bgDiv.style.backgroundSize = "cover";
        bgDiv.style.backgroundPosition = "center";
    }
    else if( top >= firHeight + weaHeight + thiHeight){
        bgDiv.style.background = 'url("' + imgPath + '/bg3.jpg")';
        bgDiv.style.backgroundRepeat = "no-repeat";
        bgDiv.style.backgroundSize = "cover";
        bgDiv.style.backgroundPosition = "center";
    }
};

function getStyle(obj,attr){
    if(obj.currentStyle) {
        return obj.currentStyle[attr];
    }
else {
        return getComputedStyle(obj,false)[attr];
    }
}
